<template>
  <v-card style="padding: 10px;">
    <v-row>
      <v-col md="3" sm="4" xs="4">
        <v-text-field v-model="searchName" label="姓名"></v-text-field>
      </v-col>
      <v-col md="3" sm="4" xs="4">
        <v-text-field v-model="searchAddress" label="籍贯"></v-text-field>
      </v-col>
    </v-row>
    <v-row style="margin: 5px;">
      <v-btn v-if="!dialog" @click="openDialog">增加</v-btn>
    </v-row>
    <v-data-table :headers="headers" :items="filteredItems">
      <template v-slot:item.actions="{ item, index }">
        <v-icon @click="editItem(item)">mdi-pencil</v-icon>
        <v-icon @click="deleteItem(index)">mdi-delete</v-icon>
        <!-- <v-icon @click="alertDelete(index)">mdi-delete</v-icon> -->
      </template>
    </v-data-table>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span v-if="editMode">编辑</span>
          <span v-else>创建</span>
        </v-card-title>
        <v-card-text>
          <v-form ref="form">
            <v-text-field v-model="editedItem.name" label="姓名"></v-text-field>
            <v-text-field v-model="editedItem.age" label="年龄"></v-text-field>
            <v-text-field v-model="editedItem.address" label="籍贯"></v-text-field>
            <v-text-field v-model="editedItem.phone" label="手机号"></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="closeDialog">取消</v-btn>
          <v-btn text color="primary" @click="saveItem">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <deleteDialog
      title="是否确定删除该条数据？"
      :value="deleteDialog"
      @deleteItem="deleteItem"
      @closeDialog="closeDeleteDialog"
    ></deleteDialog>
  </v-card>
</template>

<script>
import deleteDialog from '@/components/common/deleteDialog.vue'
export default {
  // Permission
  name: 'Permission',

  components: {
    deleteDialog
  },

  props: {},

  data() {
    return {
      deleteIndex: null,
      deleteDialog: false,
      dialog: false,
      editMode: false,
      editedItem: {},
      searchName: '',
      searchAddress: '',
      headers: [
        {
          text: '姓名',
          align: 'start',
          sortable: false,
          value: 'name'
        },
        { text: '年龄', value: 'age' },
        { text: '籍贯', value: 'address', sortable: false },
        { text: '手机号', value: 'phone', sortable: false },
        { text: '操作', value: 'actions', sortable: false }
      ],
      items: [
        {
          name: '你好',
          age: 1,
          address: 'New York No. 1 Lake Park',
          phone: '13363002413'
        },
        {
          name: '你好2',
          age: 3,
          address: 'New York No. 1 Lake Park',
          phone: '13363002413'
        },
        {
          name: '你好3',
          age: 20,
          address: 'New York No. 1 Lake Park',
          phone: '13363002413'
        },
        {
          name: '你好4',
          age: 22,
          address: 'New York No. 1 Lake Park',
          phone: '13363002413'
        },
        {
          name: '你好5',
          age: 14,
          address: 'New York No. 1 Lake Park',
          phone: '13363002413'
        },
        {
          name: '你好6',
          age: 17,
          address: 'New York No. 1 Lake Park',
          phone: '13363002413'
        }
      ]
    }
  },

  computed: {
    filteredItems() {
      // 使用计算属性过滤数据
      return this.items.filter(item => {
        const nameMatch = item.name.toLowerCase().includes(this.searchName.toLowerCase())
        const addressMatch = item.address.toLowerCase().includes(this.searchAddress.toLowerCase())
        return nameMatch && addressMatch
      })
    }
  },

  watch: {},

  created() {},

  mounted() {},

  methods: {
    openDialog() {
      this.editMode = false
      this.editedItem = {
        id: null,
        name: '',
        category: ''
      }
      this.dialog = true
    },
    closeDialog() {
      this.dialog = false
    },
    saveItem() {
      if (this.editMode) {
        // Update existing item
        const index = this.items.findIndex(item => item.id === this.editedItem.id)
        this.items.splice(index, 1, this.editedItem)
      } else {
        // Create new item
        const newItem = { ...this.editedItem, id: this.items.length + 1 }
        this.items.push(newItem)
      }
      this.closeDialog()
    },
    editItem(item) {
      this.editMode = true
      this.editedItem = { ...item }
      this.dialog = true
    },
    alertDelete(index) {
      this.deleteIndex = index
      this.deleteDialog = true
    },
    deleteItem(index) {
      console.log(index)
      this.$confirm({})
        .then(() => {
          this.items.splice(index, 1)
          this.deleteDialog = false
          console.log('ok')
        })
        .catch(() => {
          console.log('cancel')
        })
    },
    closeDeleteDialog() {
      this.deleteDialog = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
